<template>
  <div>
    <el-row v-for="item in messageList" :key="item.id" class="item">
      <span class="text-left">
         <span class="item-from">{{ item.from_user }}:</span>
        <span class="item-msg"> {{ item.message }}</span>
      </span>
      <span class="text-right">
        <span class="item-time">
                  {{ item.create_time }}
        </span>
      </span>
    </el-row>
  </div>
</template>

<script>
import {getMessage} from "@/api/message";

export default {
  name: "viewMessage",
  data() {
    return {
      messageList: [
        {
          id: 1,
          from_user: 'admin',
          from_user_id: 1,
          to_user: 'user1',
          to_user_id: 1,
          message: '这按时吃药！',
          type: 0,
          create_time: '2025-5-12 19:45'
        }
      ],
      // type: 0  // 0 管理员->患者的留言, 1 患者-> 管理员的留言
    }
  },
  computed: {
    isRoleAdmin() {
      // 从 sessionStorage 获取 role 值
      const role = sessionStorage.getItem('role');
      // 如果 role 值为 'admin'，则返回 true，否则返回 false
      return role === 'admin';
    },
    to_user_id() {
      // 从 sessionStorage 获取当前用户信息
      const user = JSON.parse(sessionStorage.getItem('userInfo'))
      return user.id
    },
    type() {
      return !this.isRoleAdmin ? 0 : 1
    }
  },
  methods: {
    getData() {
      getMessage(this.to_user_id, this.type).then(res => {
        this.messageList = res.data
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped lang="less">
.item {
  border: 1px solid #6EDDF1;
  padding: 10px;
  margin: 5px;
  border-radius: 10px;

  .text-left {
    text-align: left;
    display: block;

    .item-from {
      color: white;
    }

    .item-msg {
      color: #6EDDF1;
      text-align: left;
    }
  }

  .text-right {
    position: absolute;
    right: 10px;
    top: 10px;

    .item-time {

    }
  }

}
</style>
